<template>
  <div class="pageContent">
    <component
      :is="item.component"
      v-for="(item, index) in pageComponents"
      :key="index"
      :datas="item.setStyle"
      class="isClient"
      :class="{hoverComponent:hoverIndex==index}"
      :data-type="item.type"
    >
    </component>
  </div>
</template>

<script>
// import componentProperties from '../../../../backend/src/utils/componentProperties' // 组件数据
export default {
  data(){
    return {
      pageComponents: [], //页面组件
      hoverIndex:0,
      scrollTopTimer:null
    }
  },
  watch: {
    hoverIndex(newValue, oldValue) {
      setTimeout(() => {
        const hoverComponent=document.querySelector('.hoverComponent');
        const offsetTop=hoverComponent.offsetTop;
        const domHeight=hoverComponent.offsetHeight;
        const scrollTop=window.scrollY;
        const scrollHeight=innerHeight;
        if(scrollTop>offsetTop){
          this.timerScroll(scrollTop,offsetTop-100)
        }else if(offsetTop+domHeight>scrollTop+scrollHeight){
          this.timerScroll(scrollTop,offsetTop-100)
        }
      })
    }
  },
  mounted() {
    console.log('tv-mounted')
    // pageData=JSON.parse('');
    let pageData={}
    console.log(this.$route.params.id)
    if(this.$route.params.id=='1'){
      pageData=JSON.parse('{"id":null,"name":"页面标题","templateJson":"{\\"name\\":\\"页面标题\\",\\"details\\":\\"\\",\\"isPerson\\":false,\\"isBack\\":true,\\"titleHeight\\":35,\\"bgColor\\":\\"rgba(249, 249, 249, 10)\\",\\"bgImg\\":\\"\\"}","component":"[{\\"component\\":\\"captiontext\\",\\"text\\":\\"标题文字\\",\\"type\\":\\"1-3\\",\\"active\\":false,\\"style\\":\\"captiontextsstyle\\",\\"setStyle\\":{\\"text\\":\\"标题文字\\",\\"name\\":\\"详情页面\\",\\"description\\":\\"撒大声地撒的撒打算的撒打算d啊说的阿萨德阿萨德暗示d 萨达暗示d暗示打算的撒打算打算的阿萨德啊实打实大叔大婶的撒的\\",\\"wordSize\\":16,\\"descriptionSize\\":12,\\"wordWeight\\":400,\\"positions\\":\\"center\\",\\"descriptionWeight\\":200,\\"wordColor\\":\\"rgba(50, 50, 51, 10)\\",\\"descriptionColor\\":\\"rgba(150, 151, 153, 10)\\",\\"backColor\\":\\"rgba(255, 255, 255, 10)\\",\\"borderBott\\":false,\\"wordHeight\\":24,\\"more\\":{\\"show\\":false,\\"type\\":1,\\"text\\":\\"查看更多\\",\\"httpType\\":10,\\"http\\":\\"\\"}}},{\\"component\\":\\"magiccube\\",\\"text\\":\\"魔方\\",\\"type\\":\\"1-6\\",\\"active\\":false,\\"style\\":\\"magiccubestyle\\",\\"setStyle\\":{\\"text\\":\\"魔方\\",\\"rubiksCubeType\\":0,\\"pageMargin\\":0,\\"imgMargin\\":0,\\"imageList\\":[{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/a4ea7a47e7f413ed0e9a3072c514745c.jpg\\",\\"linktype\\":\\"10\\",\\"http\\":{}},{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/img.jpg\\",\\"linktype\\":\\"10\\",\\"http\\":{}},{\\"src\\":\\"\\",\\"linktype\\":\\"10\\",\\"http\\":{}},{\\"src\\":\\"\\",\\"linktype\\":\\"10\\",\\"http\\":{}},{\\"src\\":\\"\\",\\"linktype\\":\\"10\\",\\"http\\":{}}]}},{\\"component\\":\\"notice\\",\\"text\\":\\"公告\\",\\"type\\":\\"1-7\\",\\"active\\":false,\\"style\\":\\"noticestyle\\",\\"setStyle\\":{\\"text\\":\\"公告\\",\\"noticeText\\":\\"请填写内容，如果过长，将会在手机上滚动显示\\",\\"backColor\\":\\"rgb(255, 248, 233)\\",\\"textColor\\":\\"rgba(100, 101, 102)\\"}},{\\"component\\":\\"pictureads\\",\\"text\\":\\"图片广告\\",\\"type\\":\\"1-3\\",\\"active\\":true,\\"style\\":\\"pictureadsstyle\\",\\"setStyle\\":{\\"text\\":\\"图片广告\\",\\"swiperType\\":0,\\"borderRadius\\":0,\\"pageMargin\\":0,\\"imageMargin\\":0,\\"pagingType\\":0,\\"rowindividual\\":2,\\"imageList\\":[{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/1673945793999522.jpg\\",\\"text\\":\\"\\",\\"http\\":{}}]}}]"}');
    }else if(this.$route.params.id=='2'){
      pageData=JSON.parse('{"id":null,"name":"页面标题","templateJson":"{\\"name\\":\\"页面标题\\",\\"details\\":\\"\\",\\"isPerson\\":false,\\"isBack\\":true,\\"titleHeight\\":35,\\"bgColor\\":\\"rgba(249, 249, 249, 10)\\",\\"bgImg\\":\\"\\"}","component":"[{\\"component\\":\\"notice\\",\\"text\\":\\"公告\\",\\"type\\":\\"1-7\\",\\"active\\":true,\\"style\\":\\"noticestyle\\",\\"setStyle\\":{\\"text\\":\\"公告\\",\\"noticeText\\":\\"请填写内容，如果过长，将会在手机上滚动显示\\",\\"backColor\\":\\"rgb(255, 248, 233)\\",\\"textColor\\":\\"rgba(100, 101, 102)\\"}},{\\"component\\":\\"entertheshop\\",\\"text\\":\\"单元格\\",\\"type\\":\\"1-13\\",\\"active\\":false,\\"style\\":\\"entertheshopstyle\\",\\"setStyle\\":{\\"text\\":\\"单元格\\",\\"icon\\":\\"\\",\\"shopName\\":\\"左侧标题\\",\\"copywriting\\":\\"右侧内容\\",\\"type\\":\\"10\\",\\"http\\":{}}},{\\"component\\":\\"entertheshop\\",\\"text\\":\\"单元格\\",\\"type\\":\\"1-13\\",\\"active\\":false,\\"style\\":\\"entertheshopstyle\\",\\"setStyle\\":{\\"text\\":\\"单元格\\",\\"icon\\":\\"\\",\\"shopName\\":\\"左侧标题\\",\\"copywriting\\":\\"右侧内容\\",\\"type\\":\\"10\\",\\"http\\":{}}},{\\"component\\":\\"entertheshop\\",\\"text\\":\\"单元格\\",\\"type\\":\\"1-13\\",\\"active\\":false,\\"style\\":\\"entertheshopstyle\\",\\"setStyle\\":{\\"text\\":\\"单元格\\",\\"icon\\":\\"\\",\\"shopName\\":\\"左侧标题\\",\\"copywriting\\":\\"右侧内容\\",\\"type\\":\\"10\\",\\"http\\":{}}},{\\"component\\":\\"investigate\\",\\"text\\":\\"表单模块\\",\\"type\\":\\"2-3\\",\\"active\\":false,\\"style\\":\\"investigatestyle\\",\\"setStyle\\":{\\"text\\":\\"表单模块\\",\\"title\\":\\"表单模块\\",\\"jsonData\\":[]}}]"}');
    }else {
      pageData=JSON.parse('{"id":null,"name":"页面标题","templateJson":"{\\"name\\":\\"页面标题\\",\\"details\\":\\"\\",\\"isPerson\\":false,\\"isBack\\":true,\\"titleHeight\\":35,\\"bgColor\\":\\"rgba(249, 249, 249, 10)\\",\\"bgImg\\":\\"\\"}","component":"[{\\"component\\":\\"commoditysearch\\",\\"text\\":\\"商品搜索\\",\\"type\\":\\"1-1\\",\\"active\\":false,\\"style\\":\\"commoditysearchstyle\\",\\"setStyle\\":{\\"text\\":\\"商品搜索\\",\\"heights\\":28,\\"position\\":0,\\"sweep\\":false,\\"borderRadius\\":0,\\"textPosition\\":0,\\"backgroundColor\\":\\"rgb(249, 249, 249)\\",\\"borderColor\\":\\"rgb(255, 255, 255)\\",\\"textColor\\":\\"rgb(150, 151, 153)\\",\\"hotords\\":[]}},{\\"component\\":\\"pictureads\\",\\"text\\":\\"图片广告\\",\\"type\\":\\"1-3\\",\\"active\\":false,\\"style\\":\\"pictureadsstyle\\",\\"setStyle\\":{\\"text\\":\\"图片广告\\",\\"swiperType\\":3,\\"borderRadius\\":0,\\"pageMargin\\":0,\\"imageMargin\\":0,\\"pagingType\\":0,\\"rowindividual\\":2,\\"imageList\\":[{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/1400x0_1_q95_autohomecar__ChxkmWQ-BfeAGovIABTDso_EOr0022.jpg\\",\\"text\\":\\"\\",\\"http\\":{}},{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/a4ea7a47e7f413ed0e9a3072c514745c.jpg\\",\\"text\\":\\"\\",\\"http\\":{}},{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/Snipaste_2022-09-20_16-56-46.png\\",\\"text\\":\\"\\",\\"http\\":{}}]}},{\\"component\\":\\"graphicnavigation\\",\\"text\\":\\"图文导航\\",\\"type\\":\\"1-4\\",\\"active\\":false,\\"style\\":\\"graphicnavigationstyle\\",\\"setStyle\\":{\\"text\\":\\"图文导航\\",\\"imageList\\":[{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/20221115914378099.png\\",\\"text\\":\\"金\\",\\"http\\":{}},{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/%E8%BD%A6%E8%BE%86%E5%85%A5%E5%8F%A3.png\\",\\"text\\":\\"木\\",\\"http\\":{}},{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/%E5%AE%A0%E7%89%A9%E5%85%A5%E5%8F%A3.png\\",\\"text\\":\\"水\\",\\"http\\":{}},{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/%E7%81%AB%E7%83%AD.png\\",\\"text\\":\\"火\\",\\"http\\":{}},{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/%E5%BA%94%E6%80%A5%E5%85%A5%E5%8F%A3.png\\",\\"text\\":\\"土\\",\\"http\\":{}}],\\"navigationType\\":0,\\"imgStyle\\":0,\\"backgroundColor\\":\\"rgb(255, 255, 255)\\",\\"textColor\\":\\"rgb(0, 0, 0)\\",\\"borderRadius\\":0,\\"showSize\\":5,\\"textHeight\\":24,\\"textSize\\":12,\\"bgImg\\":\\"\\"}},{\\"component\\":\\"captiontext\\",\\"text\\":\\"标题文字\\",\\"type\\":\\"1-3\\",\\"active\\":false,\\"style\\":\\"captiontextsstyle\\",\\"setStyle\\":{\\"text\\":\\"标题文字\\",\\"name\\":\\"文房四宝\\",\\"description\\":\\"撒打算大沙发撒东方饭店司法送达 时代大厦佛挡杀佛说的都是范德萨发送的发送的发送的发所发生的发送的\\",\\"wordSize\\":16,\\"descriptionSize\\":12,\\"wordWeight\\":400,\\"positions\\":\\"left\\",\\"descriptionWeight\\":200,\\"wordColor\\":\\"rgba(50, 50, 51, 10)\\",\\"descriptionColor\\":\\"rgba(150, 151, 153, 10)\\",\\"backColor\\":\\"rgba(255, 255, 255, 10)\\",\\"borderBott\\":false,\\"wordHeight\\":27,\\"more\\":{\\"show\\":false,\\"type\\":1,\\"text\\":\\"查看更多\\",\\"httpType\\":10,\\"http\\":\\"\\"}}},{\\"component\\":\\"auxiliarysegmentation\\",\\"text\\":\\"辅助分割\\",\\"type\\":\\"1-11\\",\\"active\\":false,\\"style\\":\\"auxiliarysegmentationstyle\\",\\"setStyle\\":{\\"text\\":\\"辅助分割\\",\\"blankHeight\\":30,\\"segmentationtype\\":1,\\"paddType\\":1,\\"auxliarColor\\":\\"rgb(229, 229, 229)\\",\\"bordertp\\":\\"solid\\"}},{\\"component\\":\\"notice\\",\\"text\\":\\"公告\\",\\"type\\":\\"1-7\\",\\"active\\":false,\\"style\\":\\"noticestyle\\",\\"setStyle\\":{\\"text\\":\\"公告\\",\\"noticeText\\":\\"请全体员工到一楼开会（撒打算不对劲啊社保代缴萨达久啊是吧打几把洒基第八集撒第八集办法较大时笔记法不急大撒把飞机上大巴飞机）\\",\\"backColor\\":\\"rgb(255, 248, 233)\\",\\"textColor\\":\\"rgba(100, 101, 102)\\"}},{\\"component\\":\\"magiccube\\",\\"text\\":\\"魔方\\",\\"type\\":\\"1-6\\",\\"active\\":false,\\"style\\":\\"magiccubestyle\\",\\"setStyle\\":{\\"text\\":\\"魔方\\",\\"rubiksCubeType\\":0,\\"pageMargin\\":0,\\"imgMargin\\":0,\\"imageList\\":[{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/ai2.png\\",\\"linktype\\":\\"10\\",\\"http\\":{}},{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/ai3.png\\",\\"linktype\\":\\"10\\",\\"http\\":{}},{\\"src\\":\\"\\",\\"linktype\\":\\"10\\",\\"http\\":{}},{\\"src\\":\\"\\",\\"linktype\\":\\"10\\",\\"http\\":{}},{\\"src\\":\\"\\",\\"linktype\\":\\"10\\",\\"http\\":{}}]}},{\\"component\\":\\"videoss\\",\\"text\\":\\"视频\\",\\"type\\":\\"1-8\\",\\"active\\":false,\\"style\\":\\"videostyle\\",\\"setStyle\\":{\\"text\\":\\"视频\\",\\"src\\":\\"http://dspmonitor.startimes.com.cn:8080/image//group1/M00/00/00/EScAAGaOAN-ACrOYADgrMoqpj9E174.mp4?filename=mda-nh058xejgvw8bdyk.mp4\\",\\"coverUrl\\":null,\\"autoplay\\":false}},{\\"component\\":\\"richtext\\",\\"text\\":\\"富文本\\",\\"type\\":\\"1-10\\",\\"active\\":false,\\"style\\":\\"richtextstyle\\",\\"setStyle\\":{\\"text\\":\\"富文本\\",\\"myValue\\":\\"\\",\\"backColor\\":\\"rgb(249, 249, 249)\\"}},{\\"component\\":\\"storeinformation\\",\\"text\\":\\"店铺信息\\",\\"type\\":\\"1-12\\",\\"active\\":false,\\"style\\":\\"storeinformationstyle\\",\\"setStyle\\":{\\"text\\":\\"店铺信息\\",\\"bakcgroundImg\\":\\"\\",\\"headPortrait\\":\\"\\",\\"rubiksCubeType\\":0,\\"name\\":\\"店铺名称\\",\\"Discount\\":\\"在线支付满150减30，满100减20\\"}},{\\"component\\":\\"entertheshop\\",\\"text\\":\\"单元格\\",\\"type\\":\\"1-13\\",\\"active\\":false,\\"style\\":\\"entertheshopstyle\\",\\"setStyle\\":{\\"text\\":\\"单元格\\",\\"icon\\":\\"\\",\\"shopName\\":\\"左侧标题\\",\\"copywriting\\":\\"右侧内容\\",\\"type\\":\\"10\\",\\"http\\":{}}},{\\"component\\":\\"communitypowder\\",\\"text\\":\\"社群涨粉\\",\\"type\\":\\"1-14\\",\\"active\\":false,\\"style\\":\\"communitypowderstyle\\",\\"setStyle\\":{\\"text\\":\\"社群涨粉\\",\\"mainImg\\":\\"\\",\\"qrcodeImg\\":\\"\\",\\"title\\":\\"标题\\",\\"describe\\":\\"辅助描述\\",\\"buttonName\\":\\"立即添加\\",\\"backColor\\":\\"rgb(255, 255, 255)\\"}},{\\"component\\":\\"follow\\",\\"text\\":\\"关注公众号\\",\\"type\\":\\"1-15\\",\\"active\\":false,\\"style\\":\\"followStyle\\",\\"setStyle\\":{\\"text\\":\\"关注公众号\\",\\"heade\\":\\"\\",\\"followName\\":\\"公众号名称\\",\\"followAppId\\":\\"\\"}},{\\"component\\":\\"storenotecard\\",\\"text\\":\\"文章模块\\",\\"type\\":\\"2-2\\",\\"active\\":false,\\"style\\":\\"storenotecardstyle\\",\\"setStyle\\":{\\"text\\":\\"文章模块\\",\\"name\\":\\"这里显示专题名称\\",\\"commodityType\\":0,\\"moditystyle\\":0,\\"borderRadius\\":0,\\"textWeight\\":400,\\"noteLabels\\":true,\\"readingNumber\\":true,\\"praisePoints\\":true,\\"viewMore1\\":true,\\"viewMore2\\":true,\\"imageList\\":[],\\"positions\\":\\"bottom\\",\\"linktype\\":\\"10\\",\\"http\\":{}}},{\\"component\\":\\"tabBar\\",\\"text\\":\\"底部导航\\",\\"type\\":\\"1-5\\",\\"active\\":true,\\"style\\":\\"tabBarStyle\\",\\"setStyle\\":{\\"text\\":\\"底部导航\\",\\"activeColor\\":\\"#1989fa\\",\\"inactiveColor\\":\\"#7d7e80\\",\\"isShowBorder\\":true,\\"iconWidth\\":\\"25\\",\\"iconHeight\\":\\"25\\",\\"fontSize\\":\\"14\\",\\"Highlight\\":0,\\"iconList\\":[]}}]"}')
      // pageData=JSON.parse('{"id":null,"name":"页面标题","templateJson":"{\\"name\\":\\"页面标题\\",\\"details\\":\\"\\",\\"isPerson\\":false,\\"isBack\\":true,\\"titleHeight\\":35,\\"bgColor\\":\\"rgba(249, 249, 249, 10)\\",\\"bgImg\\":\\"\\"}","component":"[{\\"component\\":\\"pictureads\\",\\"text\\":\\"图片广告\\",\\"type\\":\\"1-3\\",\\"active\\":false,\\"style\\":\\"pictureadsstyle\\",\\"setStyle\\":{\\"text\\":\\"图片广告\\",\\"swiperType\\":3,\\"borderRadius\\":0,\\"pageMargin\\":0,\\"imageMargin\\":0,\\"pagingType\\":0,\\"rowindividual\\":2,\\"imageList\\":[{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/1673945793999522.jpg\\",\\"text\\":\\"\\",\\"http\\":{}},{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/1658906879997216.png\\",\\"text\\":\\"\\",\\"http\\":{}},{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/a4ea7a47e7f413ed0e9a3072c514745c.jpg\\",\\"text\\":\\"\\",\\"http\\":{}}]}},{\\"component\\":\\"graphicnavigation\\",\\"text\\":\\"图文导航\\",\\"type\\":\\"1-4\\",\\"active\\":false,\\"style\\":\\"graphicnavigationstyle\\",\\"setStyle\\":{\\"text\\":\\"图文导航\\",\\"imageList\\":[{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/20221115914378099.png\\",\\"text\\":\\"图\\",\\"http\\":{}},{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/ceb9c88d7683894fd5edc3e909c5d289.jpeg\\",\\"text\\":\\"文\\",\\"http\\":{}},{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/kf.png\\",\\"text\\":\\"导\\",\\"http\\":{}},{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/%E5%BA%94%E6%80%A5%E5%85%A5%E5%8F%A3.png\\",\\"text\\":\\"航\\",\\"http\\":{}}],\\"navigationType\\":0,\\"imgStyle\\":0,\\"backgroundColor\\":\\"rgb(255, 255, 255)\\",\\"textColor\\":\\"rgb(0, 0, 0)\\",\\"borderRadius\\":0,\\"showSize\\":5,\\"textHeight\\":24,\\"textSize\\":12,\\"bgImg\\":\\"\\"}},{\\"component\\":\\"notice\\",\\"text\\":\\"公告\\",\\"type\\":\\"1-7\\",\\"active\\":false,\\"style\\":\\"noticestyle\\",\\"setStyle\\":{\\"text\\":\\"公告\\",\\"noticeText\\":\\"这里是公告\\",\\"backColor\\":\\"rgb(255, 248, 233)\\",\\"textColor\\":\\"rgba(100, 101, 102)\\"}},{\\"component\\":\\"videoss\\",\\"text\\":\\"视频\\",\\"type\\":\\"1-8\\",\\"active\\":false,\\"style\\":\\"videostyle\\",\\"setStyle\\":{\\"text\\":\\"视频\\",\\"src\\":\\"http://dspmonitor.startimes.com.cn:8080/image//group1/M00/00/00/EScAAGaOAN-ACrOYADgrMoqpj9E174.mp4?filename=mda-nh058xejgvw8bdyk.mp4\\",\\"coverUrl\\":null,\\"autoplay\\":true}},{\\"component\\":\\"richtext\\",\\"text\\":\\"富文本\\",\\"type\\":\\"1-10\\",\\"active\\":true,\\"style\\":\\"richtextstyle\\",\\"setStyle\\":{\\"text\\":\\"富文本\\",\\"myValue\\":\\"\\",\\"backColor\\":\\"rgb(249, 249, 249)\\"}}]"}')
      // pageData=JSON.parse('{"id":null,"name":"页面标题","templateJson":"{\\"name\\":\\"页面标题\\",\\"details\\":\\"\\",\\"isPerson\\":false,\\"isBack\\":true,\\"titleHeight\\":35,\\"bgColor\\":\\"rgba(249, 249, 249, 10)\\",\\"bgImg\\":\\"\\"}","component":"[{\\"component\\":\\"pictureads\\",\\"text\\":\\"图片广告\\",\\"type\\":\\"1-3\\",\\"active\\":false,\\"style\\":\\"pictureadsstyle\\",\\"setStyle\\":{\\"text\\":\\"图片广告\\",\\"swiperType\\":3,\\"borderRadius\\":0,\\"pageMargin\\":0,\\"imageMargin\\":0,\\"pagingType\\":0,\\"rowindividual\\":2,\\"imageList\\":[{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/1673945793999522.jpg\\",\\"text\\":\\"\\",\\"http\\":{}},{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/1658906879997216.png\\",\\"text\\":\\"\\",\\"http\\":{}},{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/a4ea7a47e7f413ed0e9a3072c514745c.jpg\\",\\"text\\":\\"\\",\\"http\\":{}}]}},{\\"component\\":\\"graphicnavigation\\",\\"text\\":\\"图文导航\\",\\"type\\":\\"1-4\\",\\"active\\":false,\\"style\\":\\"graphicnavigationstyle\\",\\"setStyle\\":{\\"text\\":\\"图文导航\\",\\"imageList\\":[{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/20221115914378099.png\\",\\"text\\":\\"图\\",\\"http\\":{}},{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/ceb9c88d7683894fd5edc3e909c5d289.jpeg\\",\\"text\\":\\"文\\",\\"http\\":{}},{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/kf.png\\",\\"text\\":\\"导\\",\\"http\\":{}},{\\"src\\":\\"https://git-1304113371.cos.ap-nanjing.myqcloud.com/%E5%BA%94%E6%80%A5%E5%85%A5%E5%8F%A3.png\\",\\"text\\":\\"航\\",\\"http\\":{}}],\\"navigationType\\":0,\\"imgStyle\\":0,\\"backgroundColor\\":\\"rgb(255, 255, 255)\\",\\"textColor\\":\\"rgb(0, 0, 0)\\",\\"borderRadius\\":0,\\"showSize\\":5,\\"textHeight\\":24,\\"textSize\\":12,\\"bgImg\\":\\"\\"}},{\\"component\\":\\"notice\\",\\"text\\":\\"公告\\",\\"type\\":\\"1-7\\",\\"active\\":false,\\"style\\":\\"noticestyle\\",\\"setStyle\\":{\\"text\\":\\"公告\\",\\"noticeText\\":\\"这里是公告\\",\\"backColor\\":\\"rgb(255, 248, 233)\\",\\"textColor\\":\\"rgba(100, 101, 102)\\"}}]"}')
    }
    console.log(pageData)
    this.pageComponents=JSON.parse(pageData.component)
    console.log(this.pageComponents);


    //绑定按键
  },
  activated() {
    document.onkeydown = this.keyDown
    console.log('tv-activated')
  },
  deactivated() {
    console.log('tv-deactivated')
  },
  destroyed() {
    clearInterval(this.scrollTopTimer)
  },
  methods: {
    keyDown(e){
      if(e.keyCode==13){//确定
        if(this.$route.params.id=='0'){
          if(this.hoverIndex%2==0){
            this.$router.push({
              path:'/tv/1'
            })
          }else {
            this.$router.push({
              path:'/tv/2'
            })
          }
        }
      }else if(e.keyCode==38){//上
        if(this.hoverIndex>0){
          this.hoverIndex--
        }
      }else if(e.keyCode==40){//下
        if(this.hoverIndex<this.pageComponents.length-1){
          this.hoverIndex++
        }
      }else if(e.keyCode==37){//左
        if(this.hoverIndex>0){
          this.hoverIndex--
        }
      }else if(e.keyCode==39){//右
        if(this.hoverIndex<this.pageComponents.length-1){
          this.hoverIndex++
        }
      }
    },
    timerScroll(before,tar){
      console.log(before,tar)
      if(before==tar){
        return
      }
      clearInterval(this.scrollTopTimer);
      const step=(tar-before)/30;
      let now=before;
      this.scrollTopTimer=setInterval(() => {
        window.scrollTo(0, now+=step)
        if((tar>before && now>=tar) || (tar<before && now<=tar)){
          clearInterval(this.scrollTopTimer);
        }
      },10)
    }
  },
}
</script>

<style lang="scss" scoped>
.pageContent{
  .hoverComponent{
    border: 2px solid rgb(21, 91, 212)!important;
  }
}
</style>
